<score-card
  [description]="'TITLE_CODING_CHALLENGES' | translate"
  [total]="availableCodingChallenges"
  [score]="solvedCodingChallenges"
  [showAsPercentage]="true"
>
  <div right-side class="icon-group">
    <svg
      width="74"
      height="85"
      viewBox="0 0 74 85"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_2_635)">
        <path
          d="M69.2371 41.1778C68.9506 40.8702 68.6049 40.6235 68.2209 40.4524C67.8369 40.2813 67.4224 40.1893 67.0021 40.1819C66.5817 40.1745 66.1642 40.2518 65.7744 40.4092C65.3846 40.5667 65.0305 40.801 64.7332 41.0983C64.436 41.3956 64.2016 41.7497 64.0442 42.1395C63.8867 42.5293 63.8094 42.9468 63.8168 43.3671C63.8242 43.7875 63.9162 44.202 64.0873 44.586C64.2584 44.97 64.5051 45.3156 64.8127 45.6022L65.5265 46.3201C68.3731 49.1668 70.2806 51.0785 71.512 52.698C72.6932 54.2424 72.9603 55.1439 72.9603 55.912C72.9603 56.68 72.6932 57.5816 71.512 59.1259C70.2806 60.7413 68.3731 62.6571 65.5265 65.5038L64.8127 66.2217C64.5051 66.5083 64.2584 66.8539 64.0873 67.2379C63.9162 67.6219 63.8242 68.0365 63.8168 68.4568C63.8094 68.8771 63.8867 69.2947 64.0442 69.6845C64.2016 70.0743 64.436 70.4284 64.7332 70.7256C65.0305 71.0229 65.3846 71.2572 65.7744 71.4147C66.1642 71.5721 66.5817 71.6495 67.0021 71.642C67.4224 71.6346 67.8369 71.5426 68.2209 71.3715C68.6049 71.2004 68.9506 70.9537 69.2371 70.6462L70.1095 69.778C72.76 67.1275 74.9722 64.9153 76.4915 62.9243C78.0944 60.8206 79.2213 58.6 79.2213 55.912C79.2213 53.2239 78.0944 51.0033 76.4915 48.8997C74.9722 46.9087 72.76 44.6964 70.1053 42.046L69.2371 41.1778ZM58.6269 32.7296C59.428 32.9448 60.1111 33.4692 60.5259 34.1877C60.9406 34.9062 61.0533 35.7599 60.8391 36.5613L50.0368 76.8821C49.9302 77.2792 49.7464 77.6515 49.4959 77.9776C49.2454 78.3037 48.9332 78.5772 48.577 78.7827C47.8576 79.1975 47.0029 79.3096 46.2009 79.0943C45.3988 78.879 44.7152 78.3539 44.3003 77.6345C43.8855 76.9152 43.7733 76.0605 43.9887 75.2584L54.791 34.9418C54.8975 34.5442 55.0814 34.1715 55.3321 33.845C55.5828 33.5186 55.8955 33.2447 56.2522 33.0393C56.6089 32.8338 57.0026 32.7007 57.4108 32.6475C57.819 32.5944 58.2336 32.6223 58.631 32.7296H58.6269ZM40.0192 41.1778C39.4322 40.5915 38.6366 40.2622 37.807 40.2622C36.9774 40.2622 36.1817 40.5915 35.5948 41.1778L34.7266 42.046C32.0719 44.6964 29.8597 46.9087 28.3404 48.8997C26.7375 51.0033 25.6147 53.2239 25.6147 55.912C25.6147 58.6 26.7417 60.8206 28.3404 62.9243C29.8597 64.9153 32.0719 67.1275 34.7266 69.778L35.5948 70.6462C36.1882 71.1991 36.9731 71.5002 37.7841 71.4859C38.5951 71.4716 39.3689 71.143 39.9425 70.5694C40.516 69.9959 40.8446 69.2221 40.8589 68.4111C40.8732 67.6001 40.5722 66.8152 40.0192 66.2217L39.3054 65.5038C36.4588 62.6571 34.5554 60.7454 33.3199 59.1259C32.1387 57.5816 31.8757 56.68 31.8757 55.912C31.8757 55.1439 32.1387 54.2424 33.3199 52.698C34.5554 51.0827 36.4588 49.1668 39.3054 46.3201L40.0234 45.6022C40.6096 45.0152 40.9389 44.2196 40.9389 43.39C40.9389 42.5604 40.6096 41.7647 40.0234 41.1778H40.0192Z"
          fill="var(--theme-text)"
          fill-opacity="0.12"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M52.4188 11.0416C27.6378 11.0416 7.54834 31.1311 7.54834 55.912C7.54834 80.693 27.6378 100.782 52.4188 100.782C77.1998 100.782 97.2892 80.693 97.2892 55.912C97.2892 31.1311 77.1998 11.0416 52.4188 11.0416ZM13.8093 55.912C13.8093 45.6722 17.8771 35.8517 25.1178 28.6111C32.3584 21.3704 42.1789 17.3026 52.4188 17.3026C62.6586 17.3026 72.4791 21.3704 79.7197 28.6111C86.9604 35.8517 91.0282 45.6722 91.0282 55.912C91.0282 66.1519 86.9604 75.9724 79.7197 83.213C72.4791 90.4537 62.6586 94.5215 52.4188 94.5215C42.1789 94.5215 32.3584 90.4537 25.1178 83.213C17.8771 75.9724 13.8093 66.1519 13.8093 55.912Z"
          fill="var(--theme-text)"
          fill-opacity="0.12"
        />
      </g>
      <defs>
        <clipPath id="clip0_2_635">
          <rect width="106" height="106" fill="var(--theme-text)" />
        </clipPath>
      </defs>
    </svg>
  </div>
</score-card>
